<template>
	<div class="login">
		<el-row :gutter="20">
			<el-col :span="4">
			</el-col>
			<el-col :span="16">
				<div class="grid-content">
					XXX管理系统
				</div>
				<div class="grid-content">
					<el-input v-model="name" size="medium" suffix-icon="el-icon-user" placeholder="请输入用户名"></el-input>

					<el-input type="password" size="medium" suffix-icon="el-icon-key" v-model="pass" placeholder="请输入密码"></el-input>

					<el-button @click="this.doLogin">登录</el-button>
				</div>
			</el-col>
			<el-col :span="4">
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				name: '',
				pass: ''
			}
		},
		props: {
			msg: String
		},
		methods: {
			doLogin() {
				if (this.name && this.pass) {
					this.$message({
						message: '登录成功',
						type: 'success'
					});
					setTimeout(() => {
						this.$router.push('/');
					}, 1000);

				}else{
					this.$message.error('请输入用户名和密码');
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.login {
		margin: 200px;
	}

	.el-input {
		margin-bottom: 5px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}


	.grid-content {
		border-radius: 4px;
		min-height: 36px;
		width: 300px;
		margin: 0 auto;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
